﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-gl.js"></script>

    <script src="js/simplex-noise.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">
        function generateData() {
            var data = [];
            var noise = new SimplexNoise(Math.random);
            //for (var i = 0; i <= 10; i++) {
            //    for (var j = 0; j <= 10; j++) {
            //        var value = noise.noise2D(i / 2, j / 2);
            //        data.push([i, j, value * 2 + 4]);
            //    }
            //}
            for (var i = 0; i < 6; i++) {
                data.push({ name: "单元" + i, value: [i, 0, 1], other: "其它单元信息" + i });
            }
            return data;
        }
        $(function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            var series = [];
            for (var i = 0; i < 20; i++) {
                series.push({
                    id: "&ran=" + Math.random() + "&aw=1",
                    name: "10" + (i + 1) + "☆套内面积：123㎡，\n公摊面积：10㎡",
                    type: 'bar3D',
                    data: generateData(),
                    stack: 'stack',
                    shading: 'lambert',
                    itemStyle: {
                        color: '#01A1DB',
                        opacity: 0.8
                    },
                    emphasis: {
                        label: {
                            show: true,
                            distance: -10,
                            formatter: function (params) {
                                var sh = params.seriesName.split('☆')[0];
                                return sh;
                            }
                        }
                    },
                    label: {
                        show: true,
                        distance: -10,
                        formatter: function (params) {
                            var sh = params.seriesName.split('☆')[0];
                            return sh;
                        },
                        textStyle: {
                            fontSize: 18
                        }
                    }
                });
            }
            var hours = ['一单元', '一单元', '二单元', '二单元', '三单元', '三单元'];
            //var days = ['一幢', '二幢', '三幢', '四幢', '五幢', '六幢', '七幢'];
            var days = ['玫瑰花园一幢'];
            //var days = ['', '', '', '', '', '', ''];
            //var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];
            var data = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5]];
            option = {
                tooltip: {
                    triggerOn: "mousemove", enterable: false, position: function (point, params, dom, rect, size) {

                    }, formatter: function (params) {
                        return params.seriesName.replace("☆", "");
                    }, borderColor: "#ff0000"
                },
                visualMap: {
                    max: 20,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                xAxis3D: {
                    name: "",
                    type: 'category',
                    data: hours
                },
                yAxis3D: {
                    name: "",
                    type: 'category',
                    data: days
                },
                zAxis3D: {
                    name: "层数",
                    type: 'value'
                },
                grid3D: {
                    environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#00aaff' // 天空颜色
                    }, {
                        offset: 0.7, color: '#998866' // 地面颜色
                    }, {
                        offset: 1, color: '#998866' // 地面颜色
                    }], false),
                    boxWidth: 220,
                    boxDepth: 50,
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    },
                    viewControl: {
                        distance: 220,
                        autoRotate: false//是否开启视角绕物体的自动旋转查看
                    }
                },
                series: series
                //series: [{
                //    type: 'bar3D',
                //    data: data.map(function (item) {
                //        return {
                //            value: [item[1], item[0], item[2]]
                //        }
                //    }),
                //    shading: 'color',

                //    label: {
                //        show: true,
                //        textStyle: {
                //            fontSize: 16,
                //            borderWidth: 1
                //        }
                //    },

                //    itemStyle: {
                //        opacity: 0.8
                //    },

                //    emphasis: {
                //        label: {
                //            textStyle: {
                //                fontSize: 20,
                //                color: '#900'
                //            }
                //        },
                //        itemStyle: {
                //            color: '#900'
                //        }
                //    }
                //}]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            myChart.on('click', function (params) {
                // 控制台打印数据的名称
                console.log(params);
                //alert(params.value[0] + "," + params.value[1] + "," + params.value[2]);
                //window.open("Demo4.html?id=" + params.seriesId);
            });
        });
    </script>

</head>
<body>
    <!--<h1>三维楼盘表</h1>-->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1200px;height:600px;"></div>
</body>
</html>
